<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="./css/reset.css">
  <link rel="stylesheet" href="./css/common.css">
  <style>
    .header {
      position: relative;
      height: 84px;
      background-color: rgba(0, 0, 0, .8);
    }

    .header .area {
      display: flex;
      justify-content: space-between;
      height: 100%;
    }

    .header .area .left-area {
      display: flex;
    }

    .header .area .left-area .logo {
      position: relative;
      top: 50%;
      transform: translateY(-50%);
      display: block;
      width: 200px;
      height: 54px;
      background: url(./img/logo.png) no-repeat;
      text-indent: -999999px;
    }

    .header .area .left-area .nav {
      display: flex;
      margin-left: 30px;
    }


    .header .area .left-area .nav .item a {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      width: 115px;
      height: 100%;
      font-size: 18px;
      color: #c9c9dd;
    }

    .header .area .left-area .nav .item a.active,
    .header .area .left-area .nav .item a:hover {
      color: #e4b653;
      background: url(./img/main_sprite.png) no-repeat 0 0;
    }



    .header .area .left-area .nav .item .desc {
      margin-top: 8px;
      font-size: 12px;
      color: #858792;
    }

    .header .area .left-area .nav .item a:hover .desc,
    .header .area .left-area .nav .item a.active .desc {
      color: #91763f;
    }

    .header .area .left-area .search {
      position: relative;
      top: 50%;
      transform: translateY(-50%);
      display: block;
      width: 27px;
      height: 26px;
      margin-left: 8px;
      background: url(./img/nav_search.png);
    }

    .header .right-area {
      display: flex;
      align-items: center;
    }

    .header .right-area img {
      display: block;
      width: 44px;
      height: 44px;
      border: 1px solid #d9ad50;
      border-radius: 50%;
    }

    .header .right-area .login-area {
      display: flex;
      flex-direction: column;
      font-size: 14px;
      margin-left: 8px;
    }

    .header .right-area .login-area .login {
      color: #fff;
    }

    .header .right-area .login-area .desc {
      margin-top: 5px;
      color: #858792;
    }

    .header .dropmenu {
      position: absolute;
      top: 84px;
      left: 0;
      right: 0;
      height: 0;
      background-color: rgba(0, 0, 0, .7);
      overflow: hidden;
      transition: height 300ms ease-in;
    }
    .header:hover .dropmenu{
      height: 285px;
    }
    .header .dropmenu .inner {
      display: flex;
      justify-content: space-around;
      margin: 0 auto;
      width: 940px;
      height: 100%;
    }

    .header .dropmenu .inner dl {
      width: 115px;
      padding-top: 5px;
      text-align: center;
    }

    .header .dropmenu .inner dd {
      width: 100%;
      height: 30px;
      line-height: 30px;
    }

    .header .dropmenu .inner dd a {
      display: flex;
      justify-content: center;
      align-items: center;
      text-align: center;
      color: #c9c9dd;
    }

    .header .dropmenu .inner dd a:hover {
      text-decoration: underline;
    }
  </style>
</head>

<body>
  <div class="header">
    <div class="header_wrapper area">
      <div class="left-area">
        <h1>
          <a class="logo" href="#">王者荣耀</a>
        </h1>
        <ul class="nav">
          <li class="item">
            <a class="active" href="#">
              <span>游戏资料</span>
              <span class="desc">DATA</span>
            </a>
          </li>
          <li class="item">
            <a href="#">
              <span>内容中心</span>
              <span class="desc">CONTENTS</span>
            </a>
          </li>
          <li class="item">
            <a href="#">
              <span>赛事中心</span>
              <span class="desc">MATCH</span>
            </a>
          </li>
          <li class="item">
            <a href="#">
              <span>百态王者</span>
              <span class="desc">CULTURE</span>
            </a>
          </li>
          <li class="item">
            <a href="#">
              <span>社区互动</span>
              <span class="desc">COMMUNITY</span>
            </a>
          </li>
          <li class="item">
            <a href="#">
              <span>玩家支持</span>
              <span class="desc">PLAYER</span>
            </a>
          </li>
          <li class="item">
            <a href="#">
              <span>IP新游</span>
              <span class="desc">NEW GAMES</span>
            </a>
          </li>

        </ul>
        <a href="#" class="search"></a>
      </div>
      <div class="right-area">
        <a href="#">
          <img src="./img/header_login.png" alt="">
        </a>
        <div class="login-area">
          <a class="login" href="#">欢迎登录</a>
          <p class="desc">登录后查询游戏战绩</p>
        </div>
      </div>
    </div>
    <div class="dropmenu">
      <div class="inner">
        <dl>
          <dd><a href="#">版本介绍</a></dd>
          <dd><a href="#"><i class="icon_type icon_type_hot"></i>游戏介绍</a></dd>
          <dd><a href="#">英雄资料</a></dd>
          <dd><a href="#">爆料站</a></dd>
          <dd><a href="#">世界观体验站</a></dd>
          <dd><a href="#">游戏壁纸</a></dd>
        </dl>
         <dl>
          <dd><a href="#">版本介绍</a></dd>
          <dd><a href="#"><i class="icon_type icon_type_hot"></i>游戏介绍</a></dd>
          <dd><a href="#">英雄资料</a></dd>
          <dd><a href="#">爆料站</a></dd>
          <dd><a href="#">世界观体验站</a></dd>
          <dd><a href="#">游戏壁纸</a></dd>
        </dl>
         <dl>
          <dd><a href="#">版本介绍</a></dd>
          <dd><a href="#"><i class="icon_type icon_type_hot"></i>游戏介绍</a></dd>
          <dd><a href="#">英雄资料</a></dd>
          <dd><a href="#">爆料站</a></dd>
          <dd><a href="#">世界观体验站</a></dd>
          <dd><a href="#">游戏壁纸</a></dd>
        </dl>
         <dl>
          <dd><a href="#">版本介绍</a></dd>
          <dd><a href="#"><i class="icon_type icon_type_hot"></i>游戏介绍</a></dd>
          <dd><a href="#">英雄资料</a></dd>
          <dd><a href="#">爆料站</a></dd>
          <dd><a href="#">世界观体验站</a></dd>
          <dd><a href="#">游戏壁纸</a></dd>
        </dl>
         <dl>
          <dd><a href="#">版本介绍</a></dd>
          <dd><a href="#"><i class="icon_type icon_type_hot"></i>游戏介绍</a></dd>
          <dd><a href="#">英雄资料</a></dd>
          <dd><a href="#">爆料站</a></dd>
          <dd><a href="#">世界观体验站</a></dd>
          <dd><a href="#">游戏壁纸</a></dd>
        </dl>
         <dl>
          <dd><a href="#">版本介绍</a></dd>
          <dd><a href="#"><i class="icon_type icon_type_hot"></i>游戏介绍</a></dd>
          <dd><a href="#">英雄资料</a></dd>
          <dd><a href="#">爆料站</a></dd>
          <dd><a href="#">世界观体验站</a></dd>
          <dd><a href="#">游戏壁纸</a></dd>
        </dl>
         <dl>
          <dd><a href="#">版本介绍</a></dd>
          <dd><a href="#"><i class="icon_type icon_type_hot"></i>游戏介绍</a></dd>
          <dd><a href="#">英雄资料</a></dd>
          <dd><a href="#">爆料站</a></dd>
          <dd><a href="#">世界观体验站</a></dd>
          <dd><a href="#">游戏壁纸</a></dd>
        </dl>
      </div>
    </div>
  </div>
</body>

</html>